<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.11.3.min.js"></script>
		<script>
			$(function(){
				//筛选出对应的下表的
//				$("div p").eq(3).css({'color':'red','font-size':'40px'});
				//获得当前被点击的元素的class是否是one ，hasClass方法返回的是布尔值
//				$('div p').click(function(){
//					if($(this).hasClass('one')){
//						alert('找到了');
//					}
//				})
				//找到div中所有的p标签，然后筛选出class值是one的p标签
//				$("div p").filter('.one').css({'color':'red'});
				//找到div中所有的p标签，然后筛选出id值是two的p标签
//				$('div p').click(function(){
//					if($(this).is('#two')){
//						alert('这个是id为two的元素');
//					}
//				})
				//找到div中所有p标签中含有span标签的p元素
//				$('div p').has('span').css({'color':'red'});
//				$('div p').not('.one').css({'color':'red'});//排除.class值是one的元素
				//截取div中所有p标签中的一段,2~5,包头不包尾
//				$('div p').slice(2,5).css({'color':'blue'});
				//选择#box中所有儿子辈的p标签 == $('#box p')
//				$("#box").children('p').css({'color':'red','font-size':'25px'});
				//选择#box中所有的子代p标签(包括孙子，曾孙子，等等)
//				$("#box").find('p').css({'color':'blue','font-size':'25px'});
				//选择.one后的标签，如果是p标签，则选中，否则为空
//				$('.one').next('p').css({'color':'blue','font-size':'25px'});
				//选择.one父级下.one后的所有p标签
//				$('.one').nextAll('p').css({'color':'red','font-size':'blue'});
				//.prev()筛选的是前面的元素，与next同理，prevAll()也是
				//选中#two的父级元素,父级元素的一些属性会继承
//				$('#two').parent().css({'color':'red'});
				//选中所有父级元素中。class是.lx的父级元素
//				$("#two").parents('.lx').css({'color':'green'});
				//选中的是它的所有兄弟元素
//				$("#two").siblings().css({'color':'blue'});
				$("#two").siblings('span').css({'color':'blue'});//选中的是所有兄弟元素中的标签为span的元素
				$("#two").siblings('.one').css({'color':'blue'});//选中的是所有兄弟元素中的class为one的元素
				
			})
		</script>
	</head>
	<body>
		<div class="lx">
			<div id="box">
				<p>这是一个p标签0</p>
				<p class="one">这是一个p标签1</p>
				<span>sdf</span>
				<p id="two">这是一个p标签2</p>
				<p>这是一个p标签3</p>
				<p>这是一个p标签4<span> 这是一个span标签</span></p>
				<p>这是一个p标签5</p>
				<p>这是一个p标签6</p>
				<p>这是一个p标签7</p>
				<div>
					<p>我也是一个p标签</p>
					<p>我也是一个p标签</p>
					<p>我也是一个p标签</p>
					<p>我也是一个p标签</p>
					<p>我也是一个p标签</p>
				</div>
			</div>
		</div>
	</body>
</html>
